<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>照片：</td>
      <td>
        <img :src="person.imgUrl" width="100">
      </td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="f in person.friends">{{f}}</li>
        </ul>
      </td>
    </tr>

  </table>
  <button @click="loadData">点我加载超超的个人信息</button>

</template>

<script setup>

import {ref} from "vue";

const person=ref({name:'',age:'',imgUrl:'',friends:[]})

const loadData =()=>{
  person.value={
    name:'小超超',age:38,imgUrl:'cc.png',friends:['威哥','威哥2','威哥3']
  }
  console.log(person.value);
}

</script>



<style scoped>

</style>